<template>
  <div class="horizontal-ruler-container" ref="rulerContainer">
    <!-- 刻度尺左上角交叉点 -->
    <div class="ruler-corner" :title="`当前比例: ${pxPerMm.toFixed(2)}px/mm`"></div>
    
    <!-- 水平刻度尺 -->
    <div class="ruler-horizontal" ref="rulerH">
      <div v-for="mm in Math.ceil(Math.max(paperWidth, contentWidth))" :key="`h-${mm}`" 
           class="ruler-mark" 
           :class="{
             'cm-mark': mm % 10 === 0,
             'half-cm-mark': mm % 5 === 0 && mm % 10 !== 0
           }"
           :style="{left: `${mmToPx(mm)}px`}">
        <span v-if="mm % 10 === 0" class="ruler-number">{{mm}}</span>
      </div>
    </div>
    
    <!-- 右侧背景填充 -->
    <div class="ruler-h-extension" :style="{ left: `${30 + mmToPx(paperWidth)}px` }"></div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  paperWidth: {
    type: Number,
    default: 148
  },
  contentWidth: {
    type: Number,
    default: 148
  },
  pxPerMm: {
    type: Number,
    default: 3.78
  },
  scaleChanged: {
    type: Boolean,
    default: false
  }
});

const rulerContainer = ref(null);
const rulerH = ref(null);

// 毫米转像素
const mmToPx = (mm) => {
  if (!mm && mm !== 0) return 0;
  return Math.round(mm * props.pxPerMm); // 使用Math.round避免小数点导致的模糊
};

// 监听比例变化
watch(() => props.pxPerMm, (newValue) => {
  console.log('HorizontalRuler - pxPerMm变化为:', newValue);
}, { immediate: true });

// 监听内容尺寸变化
watch(() => props.contentWidth, (width) => {
  console.log('HorizontalRuler - 内容宽度变化为:', width);
}, { immediate: true });

// 监听纸张尺寸变化
watch(() => props.paperWidth, (width) => {
  console.log('HorizontalRuler - 纸张宽度变化为:', width);
}, { immediate: true });

// 同步水平滚动位置
const syncHorizontalScroll = () => {
  // 获取父容器canvas-wrapper
  const canvasWrapper = rulerContainer.value?.parentElement;
  if (!canvasWrapper) return;
  
  // 监听父容器的滚动事件
  const handleScroll = () => {
    if (rulerH.value) {
      // 同步水平滚动位置
      rulerH.value.style.transform = `translateX(-${canvasWrapper.scrollLeft}px)`;
    }
  };
  
  // 添加滚动事件监听
  canvasWrapper.addEventListener('scroll', handleScroll);
  
  // 返回清理函数
  return () => {
    canvasWrapper.removeEventListener('scroll', handleScroll);
  };
};

onMounted(() => {
  console.log('HorizontalRuler组件已挂载');
  console.log('初始宽度: 纸张', props.paperWidth, 
              '内容', props.contentWidth,
              '比例', props.pxPerMm);
  
  // 设置滚动同步
  const cleanup = syncHorizontalScroll();
  
  // 组件卸载时清理事件监听
  onUnmounted(() => {
    if (cleanup) cleanup();
  });
});
</script>

<style lang="scss" scoped>
.horizontal-ruler-container {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background-color: #f8f8f8;
  z-index: 20;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  /* 刻度尺左上角交叉点 */
  .ruler-corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: #f0f0f0;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    z-index: 15;
  }
  
  /* 水平刻度尺 */
  .ruler-horizontal {
    position: absolute;
    top: 0;
    left: 30px;
    height: 30px;
    background: #f0f0f0;
    border-bottom: 1px solid #ccc;
    right: 0;
    overflow: visible;
    z-index: 10;
    will-change: transform;
    
    .ruler-mark {
      position: absolute;
      width: 1px;
      height: 5px;
      background-color: #666;
      bottom: 0;
      
      &.cm-mark {
        height: 10px;
        background-color: #333;
      }
      
      &.half-cm-mark {
        height: 7px;
        background-color: #555;
      }
      
      .ruler-number {
        position: absolute;
        bottom: 12px;
        left: 0;
        transform: translateX(-50%);
        font-size: 10px;
        color: #333;
      }
    }
  }
  
  /* 右侧背景延伸 */
  .ruler-h-extension {
    position: absolute;
    top: 0;
    height: 30px;
    width: 3000px; /* 延伸足够远 */
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
    z-index: 9;
  }
}
</style> 